<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>

<body class="container">
    <div id="login">
        <div class="panel panel-default" style="margin: auto; margin-top: 100px; width: 500px;">

            <div class="panel panel-default">
                <div class="panel-heading">用户登录</div>
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="name">名称</label>
                            <input v-model="adminName" type="text" class="form-control" id="name" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="password">名称</label>
                            <input v-model="adminPass" type="password" class="form-control" id="password"
                                placeholder="请输入密码">
                        </div>
                        <button @click="doLogin" type="button" class="btn btn-default">登录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let loginApp = Vue.createApp({
        data() {
            return {
                adminName: '',
                adminPass: ''
            }
        }, methods: {
            doLogin() {
                axios.post("http://localhost:8080/admin/login", { adminName: this.adminName, adminPass: this.adminPass }).then((res) => {
                    if (res.data.status = 200) {
                        alert(res.data.data.admin.adminName + "登录成功")
                        var token = res.data.data.token;

                        //设置存活时间
                        let date = new Date();
                        date = new Date(date.getTime() + (1000 * 60 * 30))

                        $.cookie("token", token, { expires: date, path: "/" })
                        location.href = "index.html";
                    } else {
                        alert(res.data.msg)
                    }
                });
            }
        }
    });
    loginApp.mount("#login")
</script>

<!-- <script>
    let appLogin = Vue.createApp({
        data() {
            return {
                adminName: "",
                adminPass: ""
            }
        }, methods: {
            doLogin() {
                axios.post("http://localhost:8080/admin/login", { adminName: this.adminName, adminPass: this.adminPass })
                    .then((res) => {
                        if (res.data.status == 200) {
                            //登陆成功
                            //取出token
                            var token = res.data.data.token;
                            // 将token放入cookie
                            // 这里的时间可以设置为一个具体的时间
                            let date = new Date();
                            data = new Date(date.getTime() + (1000 * 60 * 30));
                            $.cookie("token", token, { expires: data, path: "/" });
                            alert("用户:" + res.data.data.admin.adminName + "登陆成功");
                            location.href = "index.html";
                        } else {
                            alert(res.data.msg);
                        }
                    });
            }
        }
    });
    appLogin.mount("#login");

</script> -->

</html>